<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            
            
        </title>
    </head>
    <body>
        <form id="myForm" action="" method="post">
            名字<input type="text" name="name" value="sky"> <br> <br>
            密码<input type="password" name="password" value="12345"> <br><br>
            <input id="file" type="file" name="file"><br><br>
            <input type="button" value="提交" onclick="f()">
        </form>
        <script type="text/javascript">
            var form = document.getElementById("myForm");
            var formData = new FormData(form);

            function f() {
                // 获取页面已有的一个form表单
                console.log(typeof formData);
                console.log(formData);
                //注意, 这个FormData 的函数属性是无法转成json的
                //FormData对象的操作方法，全部在原型中，自己本身没任何的属性及方法
                var json = JSON.stringify(formData);
                console.log("JSON.stringify(formData): " + json);
                // 我们可以根据name来访问表单中的字段
                // 获取名字
                console.log("formData.get('name'): " + formData.get("name"));
                console.log("formData.get('password'): " + formData.get("password")); // 获取密码

                // 当然也可以在此基础上，添加其他数据
                formData.append("token", "kshdfiwi3rh");
                console.log("formData.get('token'): " + formData.get("token"));

                //想要转成json 怎么做?? 
                // 创建一个对象, 然后循环拼接参数
                var objData = {};
                //版本一, 使用for循环
                for (var entry of formData.entries()) {
                    objData[entry[0]] = entry[1];
                }
                console.log(JSON.stringify(objData));
                //版本二, forEach + 箭头符号
                formData.forEach((value, key) => objData[key] = value);

                console.log(JSON.stringify(objData));


            }
        </script>

    </body>
</html>
